<template>
  <div class="whr100" id="dataDiv">
    <div class="bg1">
      <img src="@/assets/images/sjxq/bj1.png" />
    </div>
    <div class="bg2">
      <img src="@/assets/images/sjxq/bj1.png" />
    </div>
    <div class="bg3">
      <img src="@/assets/images/sjxq/bj1.png" />
    </div>
    <div class="bg4">
      <img src="@/assets/images/sjxq/bj1.png" />
    </div>
  </div>
</template>
    <script>
import G6 from "@antv/g6";
// import insertCss from "insert-css";
import datas from "@/assets/dagreData3.json";

var graph = {};
//根据节点状态颜色
const dataTypeColor = {
  100: "#EEBC20",
  200: "#5BD8A6",
  300: "#F46649",
};
export default {
  name: "g6dagre",
  data() {
    return {
      dagreData: [],
    };
  },
  created() {
    //获取json数据
    this.dagreData = datas;
    this.initData();
    this.$nextTick(() => {
      this.init();
    });
  },
  methods: {
    init() {
      // 节点重定义
      // G6.registerNode(
      //     "flow",
      //     {
      //         drawShape(cfg, group) {
      //             const rect = group.addShape("rect", {
      //                 attrs: {
      //                     x: -75,
      //                     y: -25,
      //                     // width: 150,
      //                     // height: 50,
      //                     radius: 5,
      //                     stroke: "#5B8FF9",
      //                     fill: dataTypeColor[cfg.dataType],
      //                     lineWidth: 3,
      //                 },
      //                 name: "rect-shape",
      //             });
      //             if (cfg.name) {
      //                 group.addShape("text", {
      //                     attrs: {
      //                         text: cfg.name,
      //                         x: 0,
      //                         y: 0,
      //                         fill: "#00287E",
      //                         fontSize: 18,
      //                         textAlign: "center",
      //                         textBaseline: "middle",
      //                         fontWeight: "bold",
      //                     },
      //                     name: "text-shape",
      //                 });
      //             }
      //             return rect;
      //         },
      //     },
      //     "single-node"
      // );
      const container = document.getElementById("dataDiv");
      const width = container.scrollWidth;
      const height = container.scrollHeight;
      graph = new G6.Graph({
        container: "dataDiv",
        width: width,
        height: height,
        defaultNode: {
          type: "flow",
        },
        defaultEdge: {
          type: "polyline",
          style: {
            radius: 5,
            endArrow: true,
            lineWidth: 2,
            stroke: "#C2C8D5",
          },
        },
        nodeStateStyles: {
          selected: {
            stroke: "#d9d9d9",
            fill: "#5394ef",
          },
        },

        modes: {
          default: [
            // "drag-canvas",
            // "zoom-canvas",
            // "click-select",
            {
              type: "tooltip",
              formatText(model) {
                const cfg = model.conf;
                const text = [];
                // cfg.forEach((row) => {
                //     text.push(row.label + ":" + row.value + "<br>");
                // });
                return text.join("\n");
              },
              offset: 10,
            },
          ],
        },
      });

      graph.read(this.dagreData);
      graph.fitView();
      if (typeof window !== "undefined")
        window.onresize = () => {
          if (!graph || graph.get("destroyed")) return;
          if (!container || !container.scrollWidth || !container.scrollHeight)
            return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
    },
    initData() {
      console.log("130", datas);
      datas.nodes.forEach((obj) => {
        if (obj.types) {
          if (obj.types === "1") {
            obj.img = new URL(
              "@/assets/images/sjxq/dataspcae.png",
              import.meta.url
            ).href;
          }
          if (obj.types === "2") {
            obj.img = new URL(
              "@/assets/images/sjxq/flink.png",
              import.meta.url
            ).href;
          }
          if (obj.types === "3") {
            obj.img = new URL(
              "@/assets/images/sjxq/data.png",
              import.meta.url
            ).href;
          }
          if (obj.types === "4") {
            obj.img = new URL(
              "@/assets/images/sjxq/bj1.png",
              import.meta.url
            ).href;
          }
        }
      });
    },
    downloadImage() {
      graph.downloadFullImage(Math.random().toString(16));
    },
  },
};
</script>
    <style rel="stylesheet/scss" lang="scss" scoped>
.whr100 {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #12426f;
  .bg1 {
    width: 1200px;
    height: 110px;
    position: absolute;
    top: 340px;
    left: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bg2 {
    width: 1200px;
    height: 110px;
    position: absolute;
    top: 620px;
    left: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bg3 {
    width: 500px;
    height: 70px;
    position: absolute;
    top: 210px;
    left: 1420px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bg4 {
    width: 500px;
    height: 70px;
    position: absolute;
    top: 450px;
    left: 1420px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
      
      